<template>
	<view>
		<!-- 顶部标签 -->
		<view style="width: 100%; z-index: 999;" :style="{ position: posStatus }">
			<view style="box-shadow: 0 3px 3px #dedede;background-color: #fff;">
				<u-tabs :list="tabList" :lineColor="config.app_color" lineWidth="50" :scrollable="false"
					itemStyle="width:50px;heigth:46px;padding-bottom:8px" @click="tabs">
					<view slot="right" style="padding-right: 10px;padding-bottom:3px;height: 36px;" @tap="showStyle()">
						<view style="margin-top: 7px;">
							<u-icon :name="mode ? 'grid' : 'list-dot'" :color="config.app_color" size="21"
								bold></u-icon>
						</view>
					</view>
				</u-tabs>
			</view>
			<scroll-view :scroll-x="true" v-if="son_type.length > 0" style="background-color: #fff;">
				<view class="son_nav">
					<view class="son_nav_li" @click="son(0)" :style="cur_son_id == 0 ? 'background: ' + config.app_color + ';color:#fff;'
						: 'border:1px solid ' + config.app_color + ';color:' + config.app_color">全部</view>
					<view class="son_nav_li" v-for="list in son_type" @click="son(list.id)" :style="list.id == cur_son_id ? 'background: ' + config.app_color + ';color:#fff;'
						: 'border:1px solid ' + config.app_color + ';color:' + config.app_color">{{ list.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex">
			<view :style="{ minHeight: son_type.length > 0 ? 'calc(40px + 70rpx)' : '40px' }"
				v-if="posStatus == 'fixed'"></view>
			<!-- 商品展示 -->
			<scroll-view scroll-y :style="{ 'height': goodsList.length > 0 ? 'calc(100vh - 40px)' : '28px' }"
				:scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower" v-if="goodsList.length || !hasMore">
				<gridgoods :set="config" :hasMore="hasMore" :goodsList="goodsList">
				</gridgoods>
				<view v-if="!hasMore">
					<u-empty text="没有更多商品了..." iconSize="0">
					</u-empty>
				</view>
			</scroll-view>
			<view v-if="showGoTop" @tap="goTop"
				style="position: absolute; bottom: 160px; right: 32px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: #999; border-radius: 50%;">
				<u-icon name="arrow-up" size="30" color="#fff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
import gridgoods from '@/page_mall/component/diy-grid-goods.vue';
export default {
	components: { gridgoods },//2.注册组件
	data() {
		return {
			navHeight: 0,
			son_type: [],//子分类列表
			cur_son_id: 0,
			curIndex: 0,
			priceType: '',
			snumType: '',
			tabList: [
				{ name: '综合', }, { name: '最新', }, { name: '销量', }, { name: '价格', }
			],
			info: {
				order_type: "default",
				snum: "",
				shop_price: "",
				time: ""
			},
			goodsList: [],
			page: 1,
			page_num: 6,
			hasMore: true, // 默认还有数据
			config: {
				showType: 1,
				app_color: "red",
				cart_icon: 'https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/tabbar/tab_1_cur_tab.png',
				recommend_icon: "https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/tuijian.png",
				stock_icon: "https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/shouqing.png",
				goods: []
			},
			mode: false,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			posStatus: 'fixed',
			showGoTop: false,
		};
	}, props: {
		set: {
			type: Object,
			default() {
				return {

				}
			}
		},
		column_id: {
			default: 0//指定分类ID，0是不指定
		},
		search: {
			default: ""//搜索内容
		}
	}, created() {

		// #ifdef H5
		this.navHeight = 0;
		// #endif

		// #ifndef H5
		this.navHeight = this.$pageData.navHeight;
		// #endif

		this.config = Object.assign(this.config, this.set)
		if (this.$pageData.param.column_id) {
			this.info.column_id = this.$pageData.param.column_id;
		} else if (this.$pageData.param.top_column_id) {
			if (this.$pageData.param.son_type) {
				this.info.top_column_id = this.$pageData.param.top_column_id;
				this.son_type = JSON.parse(this.$pageData.param.son_type);
			}

		}
		this.listInit();
		this.getGoods();
	}, methods: {
		scroll(e) {
			if (e.detail.scrollTop > 100) {
				this.showGoTop = true;
			} else {
				this.showGoTop = false;
			}
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop() {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(() => {
				this.scrollTop = 0
			});
		},
		son(id) {//点击子分类
			if (id > 0) {
				if (this.info.top_column_id) {
					delete this.info.top_column_id;
				}
				this.info.column_id = id;
			} else {
				if (this.info.column_id) {
					delete this.info.column_id;
				}
				this.info.top_column_id = this.$pageData.param.top_column_id;
			}
			this.cur_son_id = id;
			this.goodsList = [];
			this.page = 1;
			this.hasMore = true;
			this.getGoods(1);
		},
		scrolltolower() {
			if (this.hasMore) {
				this.page++;
				this.getGoods();
			} else {
				// 如果没有数据还到底部就应该为static上去
				this.posStatus = 'static'
			}
		},
		showStyle() {
			this.mode = !this.mode;
			if (this.config.showType == 1) {
				this.config.showType = 2;
			} else {
				this.config.showType = 1;
			}
			this.goTop();
		},
		getGoods(page = false) {
			if (page) {
				this.page = page;
			}
			this.info.page = this.page;
			this.info.page_num = this.page_num;
			this.info.search = this.search;
			let self = this;
			this.moxiPost('/plugin/mall/index/goods/goods_info', this.info, (data) => {
				if (self.info.page == 1) {
					self.$set(self, 'goodsList', data.data.data)
				} else {
					// 直接将新数据添加到原数组末尾
					self.goodsList.push(...data.data.data);
				}
				if (data.data.allpage <= self.info.page) {
					self.hasMore = false;
					self.posStatus = 'static';
				}
			})
		},
		listInit() {
			if (this.priceType == '') {
				this.tabList[3].name = '价格↑';
			} else {
				this.tabList[3].name = '价格↓';
			}
			if (this.snumType == '') {
				this.tabList[2].name = '销量↑';
			} else {
				this.tabList[2].name = '销量↓';
			}
		},
		tabs(e) {
			if (e.index == 0) {
				this.info.order_type = 'default'
			} else if (e.index == 1) {
				this.info.order_type = 'time'
			} else if (e.index == 2) {
				this.info.order_type = 'snum'
			} else if (e.index == 3) {
				this.info.order_type = 'shop_price'
			}
			if (e.index == 3 && this.curIndex == 3) {
				if (this.priceType == '') {
					this.priceType = 'desc'
				} else {
					this.priceType = ''
				}
			}
			this.info.shop_price = this.priceType;
			if (e.index == 2 && this.curIndex == 2) {
				if (this.snumType == '') {
					this.snumType = 'desc'
				} else {
					this.snumType = ''
				}
			}
			this.info.snum = this.snumType;
			this.listInit();
			this.curIndex = e.index;
			this.goodsList = [];
			this.page = 1;
			this.hasMore = true;
			this.getGoods(1);
		}
	}

}
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
	position: relative;
}

.son_nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 70rpx;
	font-size: clamp(16px, 4vw, 20px);

	.son_nav_li {
		padding: 3px;
		padding: 3px 10px;
		flex: 0 0 auto;
		border-radius: 25px;
		margin: 0 5px;
	}
}
</style>